<template>
  <view>
    <view class="top-box">
      <image class="top-bj" src="/static/water/indexbg.jpg" />
      <view class="msg-box">
        <view class="avter">
          <image :src="avatar" style="width: 100%; height: 100%"></image>
        </view>
        <view class="msg-box-right">
          <view class="msg-box-right-name">
            <view>{{ username ? username : "用户微信名称" }}</view>
            <view @click="goSetting">设置</view>
          </view>
          <view class="msg-box-right-phone">手机号：{{
            usersInfoObj.phone ? usersInfoObj.phone.substring(0, 11) : "-"
          }}</view>
          <!-- #ifdef H5 || APP-PLUS -->
          <view @click="shareTools" class="row shareTopBtn"
            style="align-items: flex-start; justify-content: space-around">
            <view style="margin-top: 4rpx">
              <image src="/static/water/fengxi.png" style="width: 26rpx; height: 26rpx"></image>
            </view>
            <view style="margin-left: 6rpx">分享工具</view>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <view class="card-box">
      <!-- #ifdef H5 || APP-PLUS || MP -->
      <image class="card-bg" src="/static/water/cardbg.png" style="width: 100%; height: 360rpx" />
      <!-- #endif -->
      <view class="card-box-msg">
        <!--card-box-msg-top-->
        <view class="row" style="align-items: flex-start">
          <view>
            <view style="font-size: 36rpx; font-weight: bold">税务报告</view>
            <view class="card-box-msg-center">税票查询/提升通过率</view>
          </view>
          <view style="text-align: center">
            <!-- #ifdef H5 -->
            <view class="shartBtn" @click="shareAnother()">分享他人查询</view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <button open-type="share" class="shartBtn">分享他人查询</button>
            <!-- #endif -->
            <view style="color: #488afd; margin-top: 20rpx; font-size: 26rpx" @click="handleClickSample()">查看样例报告</view>
          </view>
        </view>
        <!-- #ifdef H5 || APP-PLUS || MP -->
        <view class="row" style="margin-top: 60rpx">
          <!--<view style="color: #888888;font-size: 26rpx">分享查询 响应结果</view>-->
          <view class="card-box-msg-bottom" style="width: 100%" @click="handleClickSearch">立即查询</view>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <view style="position: relative">
      <view class="paddingL15" :style="{ height: showShare ? '380rpx' : '260rpx' }"
        style="position: absolute; width: 100%">
        <image src="/static/water/waterUserBg.png" style="width: 100%; height: 100%"></image>
      </view>
      <view class="use-msg">
        <view class="use-msg-top row">
          <view class="row">
            <view class="use-icon">
              <image src="/static/water/use.png"></image>
            </view>
            <view style="color: #488afd; font-size: 36rpx; font-weight: bold">使用情况</view>
          </view>
          <view class="row" @click="goto('/pagesWater/extension/usage')">
            <text style="color: #488afd">查看详情</text>
            <image src="/static/water/arrowdown.png" style="width: 22rpx; height: 12rpx; transform: rotate(-90deg)">
            </image>
          </view>
        </view>
        <view class="num-msg">
          <view>
            <view style="font-weight: bold">{{ numObj.freeQueryNum == "-1" ? "无限" : numObj.freeQueryNum || '-' }}次</view>
            <view class="txt-num">总次数</view>
          </view>
          <view>
            <view style="font-weight: bold; color: #f04f2f">{{ numObj.usedQueryNum || '-' }}次</view>
            <view class="txt-num">已使用</view>
          </view>
          <view>
            <view style="font-weight: bold">{{
              numObj.availQueryNum == "-1" ? "无限" : numObj.availQueryNum || '-'
            }}次</view>
            <view class="txt-num">可用</view>
          </view>
        </view>
        <view v-if="showShare" class="row" style="margin-top: 35rpx">
          <view style="color: #488afd">
            <view style="margin-bottom: 8rpx">推广增加查询次数</view>
            <view>可以无限叠加使用</view>
          </view>
          <view class="levelUp" @click="promotionFun">推广得查询次数</view>
        </view>
      </view>
    </view>
    <view class="footer-image">
      <view style="width: 49%; height: 400rpx" @click="handleClickArea()">
        <image src="/static/water/area.png" />
      </view>
      <view style="width: 49%; height: 400rpx" @click="handleClickReport()">
        <image src="/static/water/report.png" />
      </view>
    </view>
    <share-another ref="another" @close="closePop" :show="showShareAnother" v-if="showShareAnother"></share-another>
    <authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
  </view>
</template>

<script>
import Authorize from "@/components/Authorize.vue";

import { mapGetters } from "vuex";
import store from "@/store";
import { getTaxQueryShareNumberApi } from "@/api/user";
import Routine from "@/libs/routine";
import shareAnother from "@/pages/waterReport/component/shareAnother.vue";
import { shareNumApi, showShareApi } from "@/api/share";
import share from "@/utils/share";
import cache from "@/utils/cache";
import residenceTime from "@/mixins/residenceTime";
export default {
  computed: mapGetters(["isLogin", "phoneNumber", "token", "tokenStr"]),
  components: { shareAnother, Authorize },
  mixins: [residenceTime],
  data() {
    return {
      avatar: "",
      phone: "",
      username: "",
      defaultIcon: "/static/water/defaultuser.png",
      usersInfoObj: {},
      numObj: {},
      num: 0, //升级合伙人需要分享的次数
      showShare: false,
      showShareAnother: false, //分享他人弹框是否显示
      isShowAuth: false
    };
  },
  // #ifdef MP-WEIXIN
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      let params = {
        Um_Key_ButtonName: '分享他人查询',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
    }
    return {
      title: '助融报告',
      path: `/pagesWater/taxSearch/index?spreadUid=${this.usersInfoObj.id}&channelCode=fenxiangtarenchaxun`,
    }
  },
  // #endif


  //onShareAppMessage {from: "button", target: {…}}
  onLoad(options) {
    // #ifdef H5
    share.getShareConfig({}, this.$WXMENU);
    // #endif

  },
  async onShow() {
    // #ifdef H5
    if (!this.isLogin && Routine.isWeixin()) {
      await this.$wxAuthorize();
    } else {
      await this.getInfo();
      await this.getSearchNum();
      // await this.getNum()
      await this.showShareFun();
    }
    // #endif

    // #ifdef MP-WEIXIN
    if (!this.isLogin) {
      // this.isShowAuth = true
    }
    // #endif


    if (this.isLogin) {
      await this.getInfo();
      await this.getSearchNum();
      await this.showShareFun();
    }

  },
  methods: {
    pageViewTrack(stayTime) {
      const route = this.$util.getCurrentRoute()
      		let params = {
			      Um_Key_SourcePage: route.path,
			      Um_Key_Duration: stayTime,
		      }
         this.$umaTrack.pageViewTrack(params)
    },
    async onLoadFun() {
      this.isShowAuth = false
      await this.getInfo();
      await this.getSearchNum();
      await this.showShareFun();

    },
    authColse() {
      this.isShowAuth = false
    },
    closePop(val) {
      this.showShareAnother = val;
    },
    goto(path) {
      let params = {
        Um_Key_ButtonName: '使用情况-查看详情',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
      // #ifdef MP-WEIXIN
      if (!this.isLogin) return this.isShowAuth = true
      // #endif
      uni.navigateTo({ url: path });
    },
    handleClickSample() {
      let params = {
        Um_Key_ButtonName: '查看样例报告',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
      uni.navigateTo({
        url: "/pagesWater/taxSearch/companyDetail?isDemo=2",
      });
    },
    goSetting() {
      let params = {
        Um_Key_ButtonName: '设置',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
      // #ifdef MP-WEIXIN
      if (!this.isLogin) return this.isShowAuth = true
      // #endif
      uni.navigateTo({
        url: "/pagesWater/users/index",
      });
    },
    getSearchNum() {
      getTaxQueryShareNumberApi().then((res) => {
        this.numObj = res.data;
      });
    },
    async getNum() {
      let res = await shareNumApi();
      if (res.code == 200) {
        this.num = res.data.configValue;
      }
    },
    showShareFun() {
      showShareApi().then((res) => {
        if (res.code == 200) {
          this.showShare = res.data.configValue;
        }
      });
    },
    shareAnother() {
      // #ifdef MP-WEIXIN
      if (!this.isLogin) return this.isShowAuth = true
      // #endif
      this.showShareAnother = true;
    },
    promotionFun() {
      let params = {
        Um_Key_ButtonName: '推广得查询次数',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
      uni.navigateTo({ url: "/pagesWater/extension/extension" });
    },
    shareTools() {
      // #ifdef MP-WEIXIN
      if (!this.isLogin) return this.isShowAuth = true
      // #endif
      // #ifdef H5
      uni.navigateTo({
        url: "/pagesWater/extension/rightNow",
      });
      // #endif


    },
    async getInfo() {
      store
        .dispatch("USERINFO")
        .then((res) => {
          this.usersInfoObj = res;
          this.username = res.nickname;
          let icon = "";
          if (res.icon) {
            icon = res.icon;
          } else {
            icon = this.defaultIcon;
          }
          this.$set(this, "avatar", icon);
          this.sexIndex = res.gender;
        })
        .catch((err) => {
          if (err.code == 401) {
            uni.navigateTo({
              url: "/pagesWater/users/login",
            });
          }
        });
    },
    handleClick() {
      uni.navigateTo({
        url: "/pagesWater/users/login",
      });
    },
    handleClickArea() {
      let params = {
        Um_Key_ButtonName: '维护地区查询',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
      uni.navigateTo({
        url: "/pagesWater/areaList/index",
      });
    },
    async handleClickSearch() {
      if (!this.isLogin) {
        // #ifdef H5
        if (Routine.isWeixin()) {
          await this.$wxAuthorize();
          await this.getInfo();
        } else {
          uni.navigateTo({
            url: "/pagesWater/users/login?flagType=0",
          });
        }
        // #endif
        // #ifdef MP || APP-PLUS
        uni.navigateTo({
          url: "/pagesWater/taxSearch/index",
        });
        // uni.navigateTo({
        //   url: "/pagesWater/users/login?flagType=0",
        // });
        // #endif


      } else {
        uni.navigateTo({
          url: "/pagesWater/taxSearch/index",
        });
      }
    },
    handleClickReport() {
      let params = {
        Um_Key_ButtonName: '历史报告查询',
        Um_Key_SourcePage: '首页',
      }
      this.$umaTrack.pageClickTrack(params)
      uni.navigateTo({
        url: "/pagesWater/reportList/index",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.top-box {
  position: relative;

  .top-bj {
    width: 100%;
    /* #ifdef H5 */
    height: 700rpx;
    margin-top: -92rpx;
    /* #endif */
    /* #ifdef MP */
    height: 600rpx;
    /* #endif */
    //position: absolute;
  }

  .msg-box {
    position: absolute;
    left: 30rpx;
    top: 72rpx;
    display: flex;
    height: 120rpx;

    .avter {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      //background-color: pink;
      margin-right: 30rpx;
      overflow: hidden;
    }

    .msg-box-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 0;
      position: relative;

      .msg-box-right-name {
        display: flex;
        align-items: center;

        >view {
          &:nth-child(1) {
            max-width: 420rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 45rpx;
            margin-right: 20rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:nth-child(2) {
            background-color: #fff;
            width: 90rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 20rpx;
            text-align: center;
            font-size: 24rpx;
            color: #488afd;
          }
        }
      }

      .msg-box-right-phone {
        color: #fff;
      }
    }
  }
}

.card-box {
  /* #ifdef H5 || MP */
  margin-top: -330rpx;
  /* #endif */

  /* #ifdef APP-PLUS */
  margin-top: -160rpx;
  /* #endif */
  padding: 0 30rpx;
  position: relative;

  .card-bg {}

  .card-box-msg {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .card-box-msg-top {
      display: flex;
      justify-content: space-between;
    }

    .card-box-msg-center {
      margin-top: 30rpx;
    }

    .card-box-msg-bottom {
      /* #ifdef MP */
      // margin-bottom: 30rpx;
      /* #endif */
      //margin-top: 50rpx;
      text-align: center;
      //width: 96%;
      //height: 80rpx;
      width: 220rpx;
      height: 80rpx;
      color: #fff;
      line-height: 80rpx;
      background: #488afd;
      border-radius: 40rpx;
    }
  }
}

.use-msg {
  //text-align: center;
  width: 93%;
  margin: 0 30rpx;
  padding: 30rpx;
  //background: linear-gradient( 134deg, #C6DAF8 0%, #DFEDFB 100%);
  border-radius: 24rpx;
  position: relative;
  z-index: 9;

  //opacity: 0.2;
  .use-msg-top {
    display: flex;
    align-items: center;

    .use-icon {
      width: 40rpx;
      height: 50rpx;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .num-msg {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;

    >view {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #fff;
      width: 30%;
      height: 120rpx;
      border-radius: 16rpx;
      text-align: center;

      .txt-num {
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;
      }
    }
  }
}

.footer-image {
  display: flex;
  justify-content: space-between;
  margin: 30rpx;
  width: 93%;

  >view {
    height: 400rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.levelUp {
  width: 260rpx;
  height: 64rpx;
  text-align: center;
  line-height: 64rpx;
  color: #ffffff;
  background: #488afd;
  border-radius: 30rpx;
}

.shartBtn {
  width: 220rpx;
  height: 64rpx;
  text-align: center;
  line-height: 64rpx;
  color: #488afd;
  border: 1px solid #488afd;
  border-radius: 35rpx;
  font-size: 26rpx;
}

.shareTopBtn {
  width: 220rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  color: #ffffff;
  background: #488afd;
  border-radius: 35rpx;
  position: absolute;
  //left: 170rpx;
  top: 134rpx;
  padding: 0 35rpx;
}
</style>
